<template>
  <div id="food_id">
      <table>
        <tr>
            <th>食品名称</th>
            <th>食品数量</th>
            <th>食品价格</th>
            <th>保质期</th>
            <th>操作</th>
        </tr>  
        <tr v-for="food in food_list" :key="food.name">
            <td><router-link :to="'f_detail/'+food.name">{{ food.name }}</router-link></td>
            <td>{{ food.count }}</td>
            <td>{{ food.price }}￥</td>
            <td>{{ food.safe_date }}</td>
            <td>
                <button>下架</button>
            </td>
        </tr>    
      </table>    
  </div>
</template>

<script>

export default {
    created(){
        console.log("food被调用")
    },
    data(){
        return {
            food_list: [
                {
                    name: "榴莲炒肉",
                    count: 180,
                    price: 18.0,
                    safe_date: "12个月",
                },
                {
                    name: "韭菜芥末饺子",
                    count: 180,
                    price: 14.0,
                    safe_date: "36个月",
                },
                {
                    name: "西红柿炒番茄",
                    count: 180,
                    price: 8.0,
                    safe_date: "6个月",
                },
                {
                    name: "木耳拌银耳",
                    count: 180,
                    price: 18.0,
                    safe_date: "6个月",
                },
            ]
        }
    }
}
</script>

<style>
#food_id table{
    width: 100%;
    height: 300px;
    text-align: center;
}
</style>